<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
        <link rel="stylesheet" href="../js/webuploader/webuploader.css" />
        <script type="text/javascript" src="../js/webuploader/webuploader.js" ></script>
		<!--<script type="text/javascript" src="js/upload_yulan.js" ></script>-->
		<title>添加名片</title>
		<style>
            input{ background: none; border: 1px solid;}
            input[type=text]{ border-color: #ccc;height: 3em;font-size: 1em;}
            input[type=file]{ border-color: #ccc; display: none;}
            input[type=button]{ border-color: #ccc; display: none;}
            input[type="button"]{ background: none;}
            p,span{ font-size: 0.8em; color: #999;}
            .top input{ }
            .top{ height: auto;  overflow: hidden; position: relative; background: #fff; border-bottom: 1px solid #dedede; padding: 0.5em 4%;}
            .top span{ display: block; height: 2.75em; line-height: 2.75em;}
            .top a{    font-size: 0.8em;  text-align: center;  color: #ff3366; padding: 0 1.5em; margin-left: 1.25em; border: 1px solid #ff3366; }
            .top #yulan{ height: 4em; width: 4em; border-radius: 50%; position: absolute; top: 0.625em; right: 0.625em;  overflow: hidden;}
            .top #yulan img{ width: 100%; height: 100%; object-fit: cover;}
            
            
            .main{ background: #fff;}
            .main p{    height: auto;
    overflow: hidden; border-bottom: 1px solid #ccc; text-indent: 0.625em; padding-top: 0.625em;}
            .main input{ display: inline; width: 60%; margin-bottom: 0;}
            .main i{  font-style: normal; width: 30%; float: left; text-align: right; line-height: 2.5em;}
            
            .main textarea{ width: 60%; margin-bottom: 0; height:6em; font-size: 1em; line-height: 2em;}
            .main input[type=button]{ font-size:0.8em; color:#fff; height:2em; background: #ff3366; border: none; width: 40%; position: relative; left: 50%; margin-bottom: 10.312em;}
            #upload0{ display: none;}
            
            
            @media screen and (max-width: 400px) {
                .main i{ line-height: 1.25em;}
            }
            .webuploader-pick{
                background-color: #FFF; 
                display: inline-block;
                text-align: center;
                color: #ff3366;
                padding: 8px 25px;
                margin-left: 20px;
                border: 1px solid #ff3366;
                line-height: 1em;
            }
        </style>
	</head>

	<body>
		<header>
			<a><span class="leftleft"></span></a>
			<h1 id="title">添加名片</h1>
		</header>
		<section class="quyu">
			<form action="" method="post" id="upchuan0">
			    <input type="hidden" name="picUrl" class="picUrl" value="" />
				<div class="top">
					<span>头像</span>
					<div id="filePicker">上传</div>
					<p>请上传，宽高比1比1，且小于1M的头像</p>
					<div id="yulan"><img src="../img/touxiang.png" id="picUrl"/></div>
				</div>
				<div class="main">
					<p><i>名称或店铺名称：</i><input type="text" id="cardName" name="cardName" value="" /></p>
					<p><i>地址：</i><input type="text" id="address" name="address" value="" /></p>
					<p><i>电话：</i><input type="text" id="telphone" name="telphone" value="" maxlength="11" oninput="if(!/^\d+$/.test(this.value)) {alert('格式不正确 !'); this.value=this.value.replace(/[^\d]+/g,'');}" ></p>
					<p><i>路线：</i><input type="text" id="route" name="route" value="" /></p>
					<p style="border: none;"><i>经营范围：</i><textarea type="text" id="region" name="region" value="" /></textarea></p>
					<input class="button" type="button" id="addCard" value="完成" />
				</div>
			</form>
		</section>
		

		<footer>
			<nav class="mui-bar mui-bar-tab">
				<a href="javascript:;" id="tcIndex">
                    <img src="../img/shouye2.png" />
                    <span class="mui-tab-label">首页</span>
                </a>
                <a href="javascript:;" id="myfabu">
                    <img src="../img/fabu2.png" />
                    <span class="mui-tab-label">发布</span>
                </a>
                <a class="action" href="javascript:;" id="myInfo">
                    <img src="../img/mine2.png" />
                    <span class="mui-tab-label">我的</span>
                </a>
			</nav>
		</footer>
<script>
// JavaScript Document
$(document).ready(function(){
	//名片添加、编辑
    var msg = "添加成功！";
    var baseParam = {'userId':appcan.locStorage.getVal("userId")}
	var cardId = getVal("cardId");
    if(cardId!=""){
        //获取修改对象
        appcan.ajax({
           type:"post",
           async:false,       
           url:host+"/getCard.json?cardId="+cardId,
           data:"",
           dataType:"json",
           contentType: "application/json",
           success : function(dataResult) {
               if(dataResult.msg=='success'){
               var data = dataResult.data; 
                   $("#picUrl").attr("src",hostIp+data.picUrl);
                   $(".picUrl").val(data.picUrl);
                   $("#cardName").val(data.cardName);
                   $("#address").val(data.address);
                   $("#telphone").val(data.telphone);
                   $("#route").val(data.route);
                   $("#region").val(data.region);
               }
           }
       })
        $("#title").html("编辑名片");
        msg = "编辑成功！";
        baseParam = {'userId':appcan.locStorage.getVal("userId"),'id':cardId}
    }
    $("#addCard").click(function(){
        //名片添加
        var param = $("#upchuan0").serializeJson(baseParam);
        appcan.ajax({
           type:"post",
           async:false,       
           url:host+"/saveCard.json",
           data:param,
           dataType:"json",
           contentType: "application/json",
           success : function(dataResult) {
               if(dataResult.msg=='success'){
                   window.location.href = "my_card.html";
               }
           }
       })
    })
    
    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '../js/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: host+"/image/uploadImg.json?userId="+appcan.locStorage.getVal("userId"),
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        duplicate : true,
        compress :{
            width: 750,
            height: 300,
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 90,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: false,
            // 是否允许裁剪。
            crop: false,
            // 是否保留头部meta信息。
            preserveHeaders: true,
            // 如果发现压缩后文件大小比原来还大，则使用原来图片
            // 此属性可能会影响图片自动纠正功能
            noCompressIfLarger: false,
            // 单位字节，如果图片大小小于此值，不会采用压缩。
            compressSize: 0
        },
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function(file, dataResult) {
        $("#picUrl").attr("src", hostIp+dataResult.data.imgUrl);
        $(".picUrl").val(dataResult.data.imgUrl);
    });
    
    uploader.on('uploadError', function(file, reason){
        if(reason=="F_EXCEED_SIZE"){
            alert("文件大小不能超过2M");
        }
    })
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var percent = (percentage * 100).toFixed(2);
        if(percent!=100){
            $(".webuploader-pick").html("正在上传，进度"+percent+"%");
            $("#filePicker input[name='file']").attr("disabled","disabled");
        }else{
            $(".webuploader-pick").html("上传");
            $("#filePicker input[name='file']").removeAttr("disabled");
        }
    });
    
});

</script>
	</body>

</html>